// CSS arrow box inspired from http://www.cssarrowplease.com/
@mixin arrow($direction, $bg-color, $border-color, $size) {
  &:after,
  &:before {
    @if $direction == down {
      top: 100%;
    }
    @if $direction == up {
      bottom: 100%;
    }
    border: solid transparent;
    content: ' ';
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    width: 0;
  }

  &:after {
    border-color: rgba($bg-color, 0);
    border-width: $size;
    margin-left: -$size;
    @if $direction == down {
      border-top-color: $bg-color;
    }
    @if $direction == up {
      border-bottom-color: $bg-color;
    }
  }

  &:before {
    border-color: rgba($border-color, 0);
    border-width: $size;
    margin-left: -$size;
    @if $direction == down {
      border-top-color: $border-color;
    }
    @if $direction == up {
      border-bottom-color: $border-color;
    }
  }
}
